#@layer()

#define css()
<style>

    .nav-tabs .nav-link {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    #uploader {
        height: 230px;
    }

    .myPanel {
        font-size: 25px;
        color: #ccc;
        text-align: center;
        padding-top: 60px;
    }

    .tab-content > .tab-pane {
        padding: 1rem;
    }

    .card.card-outline-tabs .card-header a {
        border-top-color: #dee2e6;
    }

</style>
#end

#define script()
<script src="#(CPATH)/static/components/jquery-file-upload/js/jquery.iframe-transport.js"></script>
<link href="#(CPATH)/static/components/qcloud-upload-sdk/player/css/tcplayer.min.css" rel="stylesheet">
<script src="#(CPATH)/static/components/qcloud-upload-sdk/player/hls.min.0.13.2m.js"></script>
<script src="#(CPATH)/static/components/qcloud-upload-sdk/player/tcplayer.v4.2.1.min.js"></script>
<script>

    //clear layer.data
    parent.layer.data = {};

    $(".attachment-item").click(function () {
        //视频uuid
        var uid = $(this).children().attr("data-uid");
        //视频云类型(阿里云/腾讯云/本地视频)
        var cloudType = $(this).children().attr("data-type");
        //封面
        var cover = $(this).children().attr("data-cid");

        parent.layer.data.uid = uid;
        parent.layer.data.type = cloudType;
        parent.layer.data.cover = cover;
        parent.layer.closeAll();
    })

</script>

<script>
    $(function () {
        var id = $("#activeCategory").val();
        if (id != null && id != "") {
            $("#category" + id).addClass('active');
            $("#uititle").removeClass('active');
        }
    })

    function addCategoryActive(id) {
        //给当前a标签添加class="active",同时移除同级别a标签上的class="active"
        $("#category" + id).addClass('active').parent().siblings('li').find('a').removeClass('active');
    }


</script>

#end

#define content()

<div class="card card-outline card-tabs" style="box-shadow: none;">
    <div class="card-header p-0 border-bottom-0">
        <input type="hidden" id="activeCategory" value="#(categoryId ??)">
        <input type="hidden" id="appId" value="#(appId ??)">
        <input type="hidden" id="videoId" value="#(video.id ??)">
        <ul class="nav nav-tabs">

            <li class="nav-item"><a class="nav-link active" id="uititle" href="#(CPATH)/admin/attachment/video/browse?uititle=视频">#para("uititle")库</a>
            </li>
            #for(item : categories ??)
            <li class="nav-item">
                <a class="nav-link" id="category#(item.id ??)" onclick="addCategoryActive('#(item.id ??)')"
                   href="#(CPATH)/admin/attachment/video/browse?categoryId=#(item.id ??)&uititle=视频"> #(item.title ??)
                </a>
            </li>
            #end
        </ul>

    </div>

    <div class="card-body">
        <div class="tab-content" style="padding-top:20px;">


            <div class="active tab-pane" id="activity">
                <div class="row">
                    #for(video : page.list)
                    <div class="col-md-3">
                        <div   class="attachment-item video-card" data-aid="#(video.id ??)">
                            <div class="video-img text-center"  data-cid="#(video.cover ??)"   data-uid="#(video.uuid ??)"  data-type="#(video.cloud_type ??)" >
                                <img src="#(CPATH)#(video.cover ?? '/static/commons/img/suffix/video.png')"  class="choose-video-poster" alt="#(video.vod_name ??)">
                                <span class="video-tag">#(video.category.title ?? "未分类")</span>
                            </div>
                            <div class="video-content">
                                <h6 class="video-title mb-0 ellipsis1"><a href="#(CPATH)/admin/attachment/video/edit/#(video.id)" class="text-dark"> #(video.vod_name ??) </a></h6>
                                <div class="video-desc">
                                    <span><i class="bi bi-clock"></i> #date(video.created ??)</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    #end
                </div>

                <div class="row" style="padding-right: 20px;padding-top: 30px">
                    <div class="col-12">
                        #@_paginate()
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

#end
